<template>
  <div
    class="progress-track"
    :style="trackStyle"
    role="progressbar"
    :aria-valuenow="clamped"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <div class="progress-fill" :style="fillStyle"></div>
  </div>
  <div v-if="showLabel" class="progress-label">{{ clamped }}%</div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  value: { type: Number, default: 0 },
  height: { type: [Number, String], default: 6 },
  color: { type: String, default: '#667eea' },
  trackColor: { type: String, default: 'rgba(0, 0, 0, 0.08)' },
  rounded: { type: Boolean, default: true },
  showLabel: { type: Boolean, default: false }
})

const clamped = computed(() => {
  const n = Math.round(Number.isFinite(props.value) ? props.value : 0)
  return Math.max(0, Math.min(100, n))
})

const trackStyle = computed(() => ({
  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
  background: props.trackColor,
  borderRadius: props.rounded ? '999px' : '0',
}))

const fillStyle = computed(() => ({
  width: `${clamped.value}%`,
  background: props.color,
  height: '100%',
  borderRadius: props.rounded ? '999px' : '0',
  transition: 'width .3s ease',
}))
</script>

<style scoped>
.progress-track {
  width: 100%;
  overflow: hidden;
}

.progress-label {
  margin-top: 6px;
  font-size: 12px;
  color: #5a6c7d;
  text-align: right;
}
</style>

